<template>
  <el-switch
      v-model="theme"
      inline-prompt
      :active-icon="Moon"
      :inactive-icon="Sunny"
      style="--el-switch-on-color: #000; --el-switch-off-color: #999"
      @change="toggleDark()"
  />
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { Moon, Sunny } from "@element-plus/icons-vue";
import { useDark, useToggle, useStorage } from "@vueuse/core";
const isDark = ref(useDark());
const toggleDark = useToggle(isDark);
// 切换按钮 localStorage 中的值，保证刷新不重置
const vueuseColorScheme = useStorage("vueuse-color-scheme", null);
const theme = vueuseColorScheme.value === "auto" ? ref(false) : ref(true);
watch(
    theme,
    (newVal, oldVal) => {
      if (newVal) {
        window.document.documentElement.setAttribute("data-theme", "light");
      } else {
        window.document.documentElement.setAttribute("data-theme", "dark");
      }
    },
    {
      immediate: true,
    }
);
</script>

<style scoped>

</style>